<template>
    <div class="city">
        <div class="date_content">
            <input type="text" readonly class="el-input__inner" v-model="cityStr" placeholder="请选择" @click="changeVal">
            <span class="el-input__suffix">
             <span class="el-input__suffix-inner">
                 <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':isClick}"></i>
             </span>

         </span>
            <div class="mdule_box" v-if="isClick">
                <div class="tab">
                    <div class="tab_nav">
                        <div class="item" v-for="(item,index) in choseList" :key="index" :class="{'current':item.isClick}" @click="changeDate(index)">{{item.label}}</div>

                    </div>
                    <div class="tab_content">
                        <div class="content year" v-if="activeIndex==0">
                            <div class="row" >
                                <div class="item" v-for="(item,index) in cityList" :key="index" :class="{'current':item.name==province}"   @click="choseProvince(item.child)">{{item.name}}</div>

                            </div>

                        </div>
                        <div class="content month" v-if="activeIndex==1">
                            <div class="item" v-for="(item,index) in 12" :key="index" :class="{'current':item==cityItem}" @click="choseMonth(item)">{{item}}</div>

                        </div>
                        <div class="content date" v-if="activeIndex==2">
                            <div class="item" data-val="1" v-for="(item,index) in 31" :class="{'current':item==county}" :key="index" @click="choseDate(item)">{{item}}</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <toast :text="text" ref="toast"></toast>
    </div>
</template>

<script>
    import toast from "./toast";
    import {city} from "../utils/city"
    export default {
        name: "city",
        data() {
            return {
                isClick: false,
                text:"测试",
                cityStr:"",
                province:"",
                cityList:[],
                cityItem:"",
                cityItemList:[],
                county:"",
                countyList:[],
                activeIndex:0,
                choseList:[{
                    label:'选择省份',
                    isClick:true,
                },{
                    label:'选择城市',
                    isClick:false,
                },{
                    label:'选择地区',
                    isClick:false,
                }],
            }
        },
        components: {toast},
        mounted() {
          this.cityList=city;
        },
        methods: {
            changeDate(index){
                if(index==1){
                    if(!this.province){
                        this.text='请选择省份'
                        this.$refs.toast.open();
                        return ;
                    }
                }
                if(index==2){
                    if(!this.cityItem){
                        this.text='请选择城市'
                        this.$refs.toast.open();
                        return ;
                    }
                }
                this.choseList.forEach((a,i)=>{
                    a.isClick=false;
                    if(index==i){
                        a.isClick=true;
                    }
                })
            },
            choseProvince(list){
                console.log(list)
            },
            changeVal() {
                this.isClick = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../styles/comment.scss";

    .city {
        width: 100%;

        .date_content {
            position: relative;

            .mdule_box {
                position: absolute;
                right: 0px;
                left: auto;
                width: 450px;
                top: 100%;
                padding-top: 5px;

                .tab {
                    background-color: #fff;
                    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
                    border-radius: 2px;
                    padding: 8px 15px 15px;

                    .tab_content {
                        padding-top: 10px;

                        .date {
                            text-align: left;
                            .item.current{
                                border: 1px solid $backgroundColor;
                                background-color: $backgroundColor;
                                color: #fff;
                            }
                            .item{
                                text-align: center;
                                width: 48px;
                                display: inline-block;
                                vertical-align: middle;
                                line-height: 30px;
                                cursor: pointer;
                                margin: 1px;
                                font-size: 14px;
                                border: 1px solid #fff;
                            }
                        }

                        .month {
                            font-size: 0;
                            text-align: left;
                            .item.current{
                                border: 1px solid $backgroundColor;
                                background-color: $backgroundColor;
                                color: #fff;
                            }
                            .item {
                                display: inline-block;
                                vertical-align: middle;
                                line-height: 30px;
                                padding: 0 15px;
                                cursor: pointer;
                                margin: 1px;
                                font-size: 14px;
                                border: 1px solid #fff;
                            }
                        }

                        .year {
                            /*padding-left: 40px;*/
                            position: relative;
                            font-family: Arial;
                            font-size: 0;
                            .row{
                                /*padding-left: 40px;*/
                                position: relative;
                                font-family: Arial;
                                font-size: 0;
                                text-align: left;
                                .item.current{
                                    border: 1px solid $backgroundColor;
                                    background-color: $backgroundColor;
                                    color: #fff;
                                }
                                .item {
                                    display: inline-block;
                                    vertical-align: middle;
                                    line-height: 30px;
                                    padding: 0 8px;
                                    cursor: pointer;
                                    margin: 1px;
                                    font-size: 14px;
                                    border: 1px solid #fff;
                                }

                                .label {
                                    position: absolute;
                                    left: 0;
                                    top: 5px;
                                    font-weight: 700;
                                    color: #ccc;
                                    line-height: 32px;
                                    font-size: 14px;
                                }
                            }

                        }

                        .content {
                            min-height: 210px;
                            display: none;

                            &:first-child {
                                min-height: 210px;
                                display: block;
                            }
                        }
                    }

                    .tab_nav {
                        font-size: 0;
                        border-bottom: 1px solid #f1f1f1;
                        text-align: left;
                        .item.current {
                            color: $backgroundColor;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 0;
                                bottom: -1px;
                                width: 100%;
                                height: 2px;
                                background-color: $backgroundColor;
                            }
                        }

                        .item {
                            display: inline-block;
                            vertical-align: top;
                            font-size: 15px;
                            padding: 6px 10px;
                            cursor: pointer;
                            position: relative;
                        }
                    }
                }
            }
        }

        .el-input__suffix {
            right: 30px;

            .is-reverse {
                transform: rotate(0deg);
            }

            i {
                transform: rotate(180deg);
                position: absolute;

            }
        }


    }
</style>
